<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定层效果</title>
        <style>
        *{padding:0;margin:0;}
        body{
            background:#EEEEE0;
        }
        #header{
            width:100%;
            height:50px;
            background:#99CC33;
            position:fixed;
            top:0;
            left:0;
        }
        #conten{
            width:80%;
            height:1200px;
            border:1px solid black;
            margin:0 auto;
            margin-top:70px;
        }
        #conten .main{
            width:200px;
            height:400px;
            background:yellow;
        }
        #sidebar{
            width:80px;
            height:80px;
            background:green;
            position:fixed;
            right:5px;
            bottom:20px;
        }
        #footer{
            width:100%;
            background:#cdcdc1;
            text-align:center;
            margin-top:20px;
            padding:20px 0;
        }
        </style>
    </head>
    <body>
        <div id="header">
            <h2>网站头部</h2>
        </div>
        <div id="conten">
            <div class="main">
                <h2>内容</h2>
            </div>
        </div>
        <div id="sidebar">
            <h2>侧边栏</h2>
        </div>
        <div id="footer">
            <h2>页脚</h2>
        </div>
    </body>
</html>